<template>
	<layout>
		<view class="box">
			<!-- 公告 -->
			<view class="gonggao">
				<u-notice-bar icon="" :text="text1" fontSize="40"></u-notice-bar>
			</view>

			<!-- 标题 -->
			<uni-card>
				<view style="text-align: center;" class="slide-title">
					<p><strong><span style="font-family: 微软雅黑;font-size: 14px">{{title}}</span></strong></p>
				</view>
			</uni-card>

			<view class="content">

				<view class="u-page">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="album-container">
								<view class="album" v-for="item,index in players" :key="index">
									<!-- 头象 -->
									<!-- <u-avatar class="album__avatar" :text="item.nickName.substring(0,1)" fontSize="40"
									randomBgColor></u-avatar> -->

									<view class="album__content">
										<u-text :text="item.nickName" type="primary" bold size="35"
											class="text"></u-text>

										<video :id="'myVideo'+index" class="vote-video" :src="item.vUrl" controls
											mode="widthFix" @click="makeFullScreen(index)"
											:poster="item.vCover"></video>
										<!-- <p>{{ item.vDesc }}</p> -->
										<!-- <p> asd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadas </p> -->
										<!-- 去掉了 查看视频加评论的选项 -->
										<!-- <view class="footer-bnt">
										<button @click="catVideo(item)" size="mini">查看</button>
									</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</layout>
</template>
<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'
	import api from '@/util/api.js'
	import {
		mapActions
	} from 'vuex'
	import vote from '../../util/vote'

	export default {
		data() {
			return {
				// 公告的文字
				text1: '双击视频即可全屏观看呦!',
				title: "和我们一起拜年吧",
				// 所有的视频数据
				players: [],

				// 宽度
				albumWidth: 0,
			}
		},
		onLoad() {
			const {
				setNavigationBarTitle,
				// setPlayersLeft,
				// setPlayersRight
			} = this
			setNavigationBarTitle()
			/* 			setPlayersLeft()
						setPlayersRight() */
		},
		onShow() {
			this.getAllVideos()
		},
		components: {
			uniCard,
			layout
		},
		methods: {
			...mapActions(['setNavigationBarTitle']),
			// 获取所有的拜年视频
			getAllVideos() {
				// 清空视频数据再添加
				this.clearVideo();
				api.get("/vote/getAllVideo").then(res => {
					if (res.code != 200) return vote.message("休息会儿再来吧~", "error")
					this.ranks = res.data

					this.ranks.forEach(item => {

						this.players.push(item);
					})

				})
			},
			// 清空所有的视频数据
			clearVideo() {
				this.players = []
				// 分给左右两边
				this.players_left = [];
				this.players_right = [];
			},
			// 查看单个视频
			catVideo(item) {
				// 跳转页面带参数
				uni.navigateTo({
					url: '/pages/rankingList/videoInfo/videoInfo?nickName=' + item.nickName + '&vCover=' + item
						.vCover +
						'&vDesc=' + item.vDesc + '&vUrl' + item.vUrl + '&page=catInfo'
				})
			},
			// 放大视频播放
			makeFullScreen(index) {
				console.log(index);
				// 获取视频元素
				const videoElement = uni.createVideoContext('myVideo' + index, this);

				// 调用全屏方法
				videoElement.requestFullScreen({
					direction: 0
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	/* 背景图大盒子 */
	.box {
		/* 背景图 */
		background-repeat: repeat;
		position: relative;
		top: -1.2vh;
		// height: 70vh;
		margin-bottom: 15vh;
	}

	.album-container {
		display: flex;
		flex-wrap: wrap;

	}

	.album {
		width: calc(33.33% - 10px);
		/* 设置每列的宽度 */
		margin-right: 10px;
		/* 设置列之间的间距 */
		margin-bottom: 10px;
		/* 设置行之间的间距 */
		box-shadow: 0 20px 19px 0 rgba(0, 0, 0, 0.2);

		/* 离远点 */
		margin-bottom: 2vh;

		/* 添加阴影效果 */
		// 内容中的昵称
		.album__content {
			.text {
				position: relative;
				left: 5%;
			}

		}
	}

	.vote-video {
		width: 15vh;
		height: 15vh;
		position: relative;
		left: 10rpx;
		// 封面铺满
		object-fit: cover;
	}

	// 查看按钮
	.footer-bnt {
		button {
			background-color: #ff9b23;
			/* 设置按钮背景颜色为橙色 */
			position: relative;
			left: 3vh;

		}
	}
</style>